<template>
   <!-- v-for 循环指令 -->
  <div>
    <table align="center" v-for="(item,index) in list" :key="index">
      姓名：<span style="text-align: center;">{{ item.name}}</span>
    <br>
    年龄: <span style="text-align:center;" >{{ item.age}}</span>
    </table>

  </div>
  <div>
    <!-- align="center" 居中显示 -->
    <table border="1" align="center" >
      <tr style="background-color: aqua;">
        <td>用户借款编号</td>
        <td>借款用户账号</td>
        <td>借款款型名称</td>
        <td>借款金额</td>
        <td>剩余还款本金</td>
      </tr>
      <!-- v-for 循环指令 -->
      <tr v-for="(item,index) in ponper" :key="index" border="1" align="center">
        <td>{{item.id}}</td>
        <td>{{item.user}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pri}}</td>
        <td>{{item.priY}}</td>
      </tr>
    </table>

  </div>
  <!--style="text-align: center 居中显示  -->
  <h1 style="text-align: center;">{{title}}</h1>
  

</template>

<script setup lang="ts">
//引用vue 组件
    import {reactive,toRefs,ref} from 'vue';

    //定义list数组
    let date=reactive({
      list:[
       {name:'张大', age:21},
       {name:'李尔', age:20},
       {name:'刘珊', age:22},
       {name:'钱嗣', age:25},
       {name:'赵武', age:24}
      ],
      //定义ponper数组
      ponper:[
      {id:1,user:'zhangsan',name:'八维助学金',pri:400,priY:0},
      {id:2,user:'zhangsan',name:'八维助学金',pri:10000,priY:10000}
      ]

    })

    //定义常量
    let title=ref('双向数据绑定演示')

    //输出转为ref
    let {list,ponper} =toRefs(date)


</script>

<style scoped>

</style>